<!DOCTYPE html >

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>day-4-设置元素内容</title>
    <script type="text/javascript" src="../html-js/tool.js"></script>

    <style>
        .myclass {
            font-style: italic;
            color: darkblue;
        }

        /* 高亮css类 */
        .highlight {
            color: red;
            font-size: 30px;
            background: lightblue;
        }
    </style>

</head>

<body>
<div class="section">
    <h2>jQuery选择器实验室</h2>
    <input style="height: 24px" id="txtSelector"/>
    <button id="btnSelect" style="height: 30px">选择</button>
    <hr/>
    <div>
        <p id="welcome">欢迎来到选择器实验室</p>
        <ul>
            <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                    style="color: darkgreen" href="http://www.so.com">360</a>
				</span>
            </li>
            <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                    style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
				</span>
            </li>
            <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
						<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
				</span>
            </li>
        </ul>

        <span class="myclass ">我是拥有myclass类的span标签</span>

        <p class="myclass">我是拥有myclass的p标签</p>
        <form id="info" action="#" method="get">
            <div>
                用户名：<input type="text" name="uname" value="admin"/> 密码：<input
                    type="password" name="upsd" value="123456"/>
            </div>
            <div id="div_add_select_option">
                婚姻状况：
                <select id="marital_status">
                    <option value="1">未婚</option>
                    <option value="2">已婚</option>
                    <option value="3">离异</option>
                    <option value="4">丧偶</option>
                </select>
            </div>
            <div class="left clear-left">
                <input type="submit" value="提交"/> <input type="reset" value="重置"/>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
    /**
     *
     *
     val() - 表单字段的值
     text() - 所选元素的文本内容
     html() - 所选元素的内容（包括 HTML 标记）

     这里需要注意 他没有set get方法 传参就是设置值  不传参数就是获取值
     */
    $("input[name='uname']").val("administrator");
    var strInputName = $("input[name='uname']").val();//administrator
    Ulog.i("strInputName", strInputName);

    //text与html方法最大的区别在于对于文本中的html标签是否进行转义
    //$("span.myclass").text("<b>锄禾日当午，汗滴禾下土</b>");
    $("span.myclass").html("<b>锄禾日当午，汗滴禾下土</b>");


    //在<select id="marital_status"> 中追加内容 </select>
    $("#marital_status").append("<option value='5'>" + "1" + "</option>")
    $("#marital_status").append("<option value='6'>" + "2" + "</option>")
    $("#marital_status").append("<option value='7'>" + "3" + "</option>")

    var strSpanText = $("span.myclass").text();
    Ulog.i("strSpanText", strSpanText);
</script>
</body>
</html>
